<template>
	<div class="vue_app ThematicActivities" style="height: 100%;">
		<header-container>
			<div>
				<m-header :title="Title" :hasTitle="true" :hasBack="true"></m-header>
			</div>
			<activitiesbanner :bannerid="item.id" v-for="(item, index) in pageTree.header[type.activitiesbanner]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.activitiesbanner}">
			</activitiesbanner>
			<header-tab :style="`background-color: ${tabbgcolor}`" :titleInfor="HeaderTabNavArray" :styleConfig="styleConfig" v-for="(item, index) in pageTree.header[type.TabHead]" :key="index" v-sdrag:real="{id: item.id, com: item.id, dragable: 0, type: type.TabHead}">
			</header-tab>
		</header-container>
		<div style="height: 100%;">
			<translate-main :lengths="HeaderTabNavLength">
				<!-- <div>122222222</div> -->
				<self-page></self-page>
			</translate-main>
		</div>
		<!-- <content-container  style="min-height: 200px;">
            
            <carousel 
                v-for="(item, index) in pageTree.content[type.carousel]" :key="index"
                v-sdrag:real="{id: item.id, com: item.id, type: type.carousel}">
            </carousel>
            <user-card v-for="(item, index) in pageTree.content[type.userCard]" :key="index"
                v-sdrag:real="{id: item.id, com: item.id, type: type.userCard, editable:false}" >
            </user-card>
        </content-container> -->
	</div>
</template>
<script>
	import { getPageTree, initDomTree } from "../../utils/getPageTree";
	//引入包裹“真实-基础组件”的组件
	import HeaderContainer from "../../real-components/HeaderContainer";
	import ContentContainer from "../../real-components/ContentContainer";
	import FooterContainer from "../../real-components/FooterContainer";
	//引入真实-基础组件
	import activitiesbanner from "../GoodsForSF/activitiesbanner";
	import TranslateMain from "../../real-components/TranslateTest";
	import SelfPage from "./SelfPage";
	import HeaderTab from "../../real-components/TabHead";
	import Header from "../header";
	import Carousel from "../../real-components/HomeCarousel";
	//引用utils文件下的方法
	import getPageName from "../../utils/getPageName";
	export default {
		data() {
			return {
				type: {
					carousel: "HomeCarousel",
					userCard: "UserCard",
					TabHead: "TabHead",
					activitiesbanner: "activitiesbanner",
				},
				styleConfig: {
					normalColor: '',
					activeTextColor: '',
					activeBackgroundColor: '',
				},
				Title: "",
				tabbgcolor: "",
			}
		},
		computed: {
			pageName() {
				return getPageName();
			},
			pageTree() {
				return getPageTree(this);
			},
			pageConfig() {
				return getPageTree(this, this.pageName).config;
			},
			HeaderTabNavArray() {
				if(getPageTree(this).header[this.type.TabHead][0].config && getPageTree(this).header[this.type.TabHead][0].config.pages) {
					let arr = getPageTree(this).header[this.type.TabHead][0].config.pages.filter(item => {
						//只返回启用的
						return item.state === "1";
					}).map(item => {
						return {
							goodsClassName: item.name
						};
					});
					// arr.unshift({goodsClassName: "首页"});
					return arr;
				} else {
					return [];
				}
			},
			HeaderTabNavLength() {
				return this.HeaderTabNavArray.length;
			}
		},
		methods: {
			getBgcolorStyle() {
				if(this.pageConfig) {
					this.Title = this.pageConfig.activitiesTitle;
					this.tabbgcolor = this.pageConfig.tabbgcolor;
					this.styleConfig.normalColor = this.pageConfig.tabtextcolor;
					this.styleConfig.activeTextColor = this.pageConfig.clicktabbgcolor;
					this.styleConfig.activeBackgroundColor = this.pageConfig.clicktabtextcolor;
				}
			},
			inite() {
				PSEvent.listen("changeStoreCode", () => {
					this.getBgcolorStyle()
				});
				PSEvent.listen("BgcolorUpdate", () => {
					this.getBgcolorStyle()
				});
				PSEvent.listen("TabStyleUpdate", () => {
					this.getBgcolorStyle()
				});
			},
			removeListen() {
				PSEvent.remove("changeStoreCode");
				PSEvent.remove("BgcolorUpdate");
				PSEvent.remove("TabStyleUpdate");
			},

		},
		components: {
			"header-container": HeaderContainer,
			"m-header": Header,
			"content-container": ContentContainer,
			"carousel": Carousel,
			// "user-card": UserCard,
			"header-tab": HeaderTab,
			"self-page": SelfPage,
			TranslateMain,
			activitiesbanner
		},
		created() {
			// console.log("getPageTree(this).header[this.type.TabHead]", getPageTree(this).header[this.type.TabHead]);
		},
		mounted() {
			setTimeout(() => {
				initDomTree(this.$store.getters.getDomTree[this.pageName]);
			}, 200);
			this.inite()
			this.getBgcolorStyle()

			// initDomTree(this.pageTree);
		},
		updated() {
			// console.log("this.$store.getters.getDomTree[this.pageName]", this.$store.getters.getDomTree[this.pageName])
			// initDomTree(this.$store.getters.getDomTree[this.pageName]);
			// console.log()
			// initDomTree(this.pageTree);
		},
		beforeDestroy() {
			this.removeListen()
		},
	}
</script>
<style>

</style>